<template>
	<view class="xy-goods-row">
		<view class="item" @tap="onLink(item.id)">
			<view class="image"><image mode="widthFix" :src="item.image"/></view>
			<view class="r">
				<view class="name">{{item.title}}</view>
        <view class="bot">
          <view class="price">¥{{$xyfun.pe(item.price)}}</view>
          <view class="sales">销量:{{item.sales}}</view>
          <view class="yz-iconfont yz-gouwuche" @click.stop="addCart(item)"></view>
        </view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: "xyGoodsRow",
		props: {
			item: {
				type: Object,
			}
		},
		data() {
			return {

			};
		},
		methods: {
			async onLink(id){
				this.$Router.push({
					path: '/pages/shop/detail',
					query: {id:id},
				});
			},
      addCart(item){
        this.$emit('addCart', item);
      }
		}
	}
</script>
<style lang="scss">
.xy-goods-row {
  .item {
    display: flex;
    color: $font-color;
    flex-wrap: nowrap;
    text-align: left;
    padding: 20rpx 10rpx;
    .image {
      flex-shrink: 0;
      width: 196rpx;
      height: 196rpx;
      overflow: hidden;
      display: flex;
      align-items: center;
      image {
        width: 196rpx;
        border-radius: 12rpx;
      }
    }

    .r {
      flex-grow: 1;
      margin-left: 24rpx;
      .name {
        height: 130rpx;
      }
      .desc{
        font-size: 24rpx;
        line-height: 40rpx;
        margin-top: 10rpx;
        height: 80rpx;
        display: -webkit-box;           /* 设置为弹性盒子布局 */
        -webkit-box-orient: vertical;   /* 设置盒子的方向为垂直 */
        -webkit-line-clamp: 2;          /* 限制显示行数为 3 */
        overflow: hidden;               /* 超出部分隐藏 */
        text-overflow: ellipsis;        /* 超出部分用省略号显示 */
      }
      .bot{
        margin-top: 14rpx;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        .price{
          color: $theme1;
          font-size: 26rpx;
          font-weight: bold;
        }
        .sales{
          color: $font-color;
          font-size: 22rpx;
        }
        .yz-iconfont{
          height: 50rpx;
          width: 50rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          color: $theme1;
          background: #e5e5e5;
          text-align: center;
          border-radius: 25rpx;
        }
      }
    }

  }
}
</style>
